<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<div id="main" style="width: 800px; height: 600px"></div>

<script>
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);

  myChart.showLoading();

  fetch("/china.json")
    .then((response) => response.json())
    .then((result) => {
      myChart.hideLoading();
      echarts.registerMap("China", result);
      myChart.setOption({
        title: {
          text: "中国地图",
          subtext: "",
          sublink: "",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} 千公顷",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          min: 800,
          max: 50000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            name: "中国地图",
            type: "map",
            map: "China",
            roam: true,
            zoom: 1.2,
            label: {
              show: true,
              fontSize: 10,
            },
            itemStyle: {
              areaColor: "white",
              borderColor: "#111",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: [
              { name: "湖南省", value: 3967.67 },
              { name: "黑龙江省", value: 3601.37 },
              { name: "江西省", value: 3403.0 },
              { name: "安徽省", value: 2496.48 },
              { name: "湖北省", value: 2263.96 },
              { name: "江苏省", value: 2221.42 },
              { name: "四川省", value: 1874.0 },
              { name: "广东省", value: 1835.9 },
              { name: "广西", value: 1758.03 },
              { name: "吉林省", value: 833.18 },
              { name: "云南省", value: 709.46 },
              { name: "重庆市", value: 659.19 },
              { name: "浙江省", value: 629.19 },
              { name: "贵州省", value: 613.77 },
              { name: "河南省", value: 601.7 },
              { name: "福建省", value: 599.45 },
              { name: "青海省", value: 599.45 },
              { name: "广西壮族自治区", value: 400.45 },
              { name: "宁夏回族自治区", value: 300.45 },
              { name: "辽宁省", value: 516.39 },
              { name: "海南省", value: 228.69 },
              { name: "内蒙古自治区", value: 117.23 },
              { name: "山东省", value: 106.43 },
              { name: "陕西省", value: 106.09 },
              { name: "上海省", value: 103.7 },
              { name: "河北省", value: 76.59 },
              { name: "天津省", value: 55.26 },
              { name: "新疆维吾尔自治区", value: 36.71 },
              { name: "宁夏", value: 29.37 },
              { name: "甘肃省", value: 2.49 },
              { name: "山西省", value: 2.16 },
              { name: "西藏自治区", value: 0.83 },
              { name: "北京", value: 0.42 },
            ],
          },
        ],
      });
    });
</script>
